Notion + Mermaid.js でガントチャートを活用する
こんにちわ。従業員体験( EX ) の向上がミッションのエンジニアリング統括室に所属しているてぃーびーです。
Notion の Mermaid.js でガントチャートを利用することができます。
Mermaid.js でガントチャートを利用する場合の各種文法についてまとめます。
タイトル
title でタイトルを設定できます。
日付のフォーマット
タスクの日付指定
dateFormat でタスクに指定する日付のフォーマットを設定できます。
デフォルトは YYYY-MM-DD です。
日時の記法は https://mermaid-js.github.io/mermaid/#/gantt を参照ください。
X軸の日付指定
axisFormat でX軸の日付のフォーマットを設定できます。
デフォルトは %Y-%m-%d です。
日時の記法は https://mermaid-js.github.io/mermaid/#/gantt を参照ください。
セクション
section でセクションを設定できます。
タスク
task名 :status, taskId, start, end
1つのタスクに対して、上記の指定でステータス、タスクID、開始日、終了日を設定します。
タスクID
task名 :status, taskId, start, end
タスクIDは個々のタスクの識別子です。タスクIDを指定することによって、後続のタスク内で ID 指定で参照することができます。
具体的な用法は after の部分で説明します。
開始日
task名 :status, taskId, start, end
開始日はそのタスクが開始する日です。 start の部分に指定します。
終了日
task名 :status, taskId, start, end
終了日はそのタスクが終了する日です。 end の部分に指定します。終了までの期間として記述することもできます。
after
task名 :status, taskId, after taskId, end
開始日に after taskId と指定することによって、指定したタスクIDのタスクの終了日の直後に設定中のタスクの開始日を設定することができます。
休日除外
excludes で任意の日や週末を除外することができます。
ステータス
各タスクにはステータスを設定し、見た目を変えることができます。
- done - 完了
- active - 実施中
- crit - クリティカル = 重要ってことだろうか。もしくはクリティカルパスを表現させたい？(ヘルプに説明がない)
- milestone - マイルストーン
コメント
%% 以降は行コメントになります
todayMarker
当日、現在時刻を表示する todayMaker のオンオフや見た目の線の太さ・色などを設定できます。
デフォルト
カスタム
オン・オフ
click
タスクにクリックイベントを設定できます。
まとめ
Notion の Mermaid.js でガントチャートを利用する際の文法をまとめました。
